<template>
  <div class="lm-add-patient">
    <div class="details-body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in navBarItem "
          :key="item.id+'_tabs'"
          :label="item.name"
          :name="item.id"
          :lazy="true"
        >
          <div class="details-body-panel">
            <component :is="item.id" :patient-data.sync="param[item.id]"></component>
            <div class="bot-bar">
              <div class="bottomBar">
                <button @click="goBack">取消</button>
                <button class="btn" @click="nextBtn">下一步</button>
                <button v-if="index>0" class="btn" @click="prevBtn">上一步</button>
                <button>暂存</button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>
<script>
import NavBar from './children/NavBar';
import NavBarItem from './children/NavBarItem';
import Message from './Message';
import Prompt from './children/Prompt';
import SamePatient from './children/SamePatient';
import Fileimg from './children/Fileimg';
import ClinicalDiagnosis from './ClinicalDiagnosis';
import Viewdata from './Viewdata';
import SendingDentalMolds from './SendingDentalMolds';
import ChangePlanMsg from './ChangePlanMsg';
import PreviewMedicalRecord from './PreviewMedicalRecord';
import { mapMutations } from 'vuex';
const storeModule = 'caseMsg/';

export default {
  name: 'AddPatient',
  components: {
    NavBar,
    NavBarItem,
    Message,
    Prompt,
    SamePatient,
    Fileimg,
    ClinicalDiagnosis,
    Viewdata,
    SendingDentalMolds,
    PreviewMedicalRecord,
    ChangePlanMsg
  },
  data() {
    return {
      navBarItem: [
        { name: '基本信息', id: 'message' },
        { name: '临床诊断', id: 'clinicalDiagnosis' },
        { name: '影像资料', id: 'viewdata' },
        { name: '口扫或牙模', id: 'sendingDentalMolds' },
        { name: '预览病例', id: 'previewMedicalRecord' }
      ],
      param: {
        message: {},
        clinicalDiagnosis: {},
        viewdata: {},
        sendingDentalMolds: {},
        previewMedicalRecord: {},
        changePlanMsg: {}
      },
      index: 0,
      activeName: 'message'
    };
  },
  methods: {
    ...mapMutations(storeModule, ['CHANGE_CASE_MSG']),
    handleClick(index) {

    },
    initEdit(params) {
      this.CHANGE_CASE_MSG(params);// 存储信息
      this.navBarItem = [
        { name: '基本信息', id: 'message' },
        { name: '临床诊断', id: 'clinicalDiagnosis' },
        { name: '影像资料', id: 'viewdata' },
        { name: '口扫或牙模', id: 'sendingDentalMolds' },
        { name: '套餐和矫治器信息', id: 'changePlanMsg' }
      ];
    },
    goBack() {
      this.$emit('goBack');
    },
    nextBtn() {
      if (this.index > this.navBarItem.length) {
        this.index = this.navBarItem.length - 1;
      } else {
        this.index++;
      }
      this.activeName = this.navBarItem[this.index].id;
    },
    prevBtn() {
      if (this.index < 0) {
        this.index = 0;
      } else {
        this.index--;
      }
      this.activeName = this.navBarItem[this.index].id;
    }
  }
};
</script>

<style lang="scss" scoped>
.lm-add-patient{
  .details-body{
    .details-body-panel{
      padding-bottom: 50px;
    }
    .bot-bar{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      .bottomBar{
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        height: 52px;
        background: #ffffff;
        /*box-shadow: #cccccc 1px 1px 1px;*/
        button{
          width: 72px;
          height: 28px;
          border-radius: 24px;
          border: #e6e6e6 1px solid;
          color: #666666;
          font-size: 16px;
          /*line-height: 28px;*/
          text-align: center;
          margin: 0px 10px;
        }
      }
    }
  }
}

</style>
